\chapter{Développement}

	Au cours de cette partie, nous allons présenter l'interface. L'apparence de chaque page ainsi que les traitements effectués seront donc décrits. \\ 
	
	\section{Page d'accueil}
	
		Tout d'abord, la page d'accueil (cf fig.~\ref{V1-interface-index}). Elle est divisée en deux parties distinctes destinées à chaque type d'utilisateur : administrateur ou participant. \\ 
		
		L'administrateur est unique, c'est ce dernier qui s'occupe de la gestion de l'étude. L'identification se fait grâce à l'utilisation d'un fichier json. Depuis l'accueil, l'administrateur peut se connecter grâce à son adresse mail et son mot de passe. Néanmoins, si ce dernier a oublié son mot de passe, il peut demander à le redéfinir. Pour ce faire, il renseigne son adresse mail, un mail lui est donc envoyé avec un nouveau mot de passe qui lui permettra de se connecter. En effet, le mot de passe étant crypté, il ne peut pas être retransmis. \\
		
		Du côté des participants il est possible : d'adhérer à l'étude en se créant un identifiant, se connecter avec un identifiant préalablement créé ou, de manière analogue à l'administrateur, demander un rappel de son identifiant à l'aide de son adresse mail. 
		
		\begin{figure}[H]
			\centering
			\includegraphics[width=\textwidth]{./img/V1/interface/index}		
			\caption{Page d'accueil}
			\label{V1-interface-index}
		\end{figure}

	\section{Administration}

		Une fois connecté, l'administrateur peut alors accéder à un panneau de gestion (cf fig.~\ref{V1-interface-admin-pannel-nostudy}). Ce dernier offre la possibilité : 
		\begin{itemize}
			\item de changer son mot de passe
			\item d'obtenir les résultats 
			\item de supprimer les données d'un participant
			\item de lancer une étude 
			\item de visualiser les études précédement réalisées 
		\end{itemize}
		Ces fonctionnalités vont être détaillées une à une dans les sections suivantes. 
		
		\begin{figure}[H]
			\centering
			\includegraphics[width=\textwidth]{./img/V1/interface/admin-pannel-nostudy}		
			\caption{Panneau d'administration}
			\label{V1-interface-admin-pannel-nostudy}
		\end{figure}
		
		\subsection{Gestion du mot de passe} 
			
			L'administrateur peut changer son mot de passe. Pour cela, il faut renseigner l'actuel puis entrer le nouveau et le confirmer. Le mot de passe est modifié uniquement quand les 3 champs sont correctement remplis. Pour plus de sécurité le mot de passe doit avoir une longueur supérieure à 4 caractères. 
		
		\subsection{Obtention des résultats}
			
			L'obtention des résultats est accessible dès lors qu'il y a au moins un résultat, sinon le bouton n'apparait pas. Ainsi, l'administrateur peut récupérer les résultats de ses études sous forme de tableur de manière à pouvoir les analyser. \\
			Pour ce faire, les données sont récupérées dans la base de données puis transcrites pour produire un document CSV~\footnote{Comma-Separated Values} qui peut être visualisé depuis n'importe quel logiciel gérant les tableurs. Une fonction PHP permet d'ajouter ligne après ligne des données dans le document : \verb+fputcsv+ qui prend en paramètre le fichier CSV dans lequel il doit écrire, un tableau correspondant à la ligne à traduire et le caractère de séparation. 
		
		\subsection{Suppression des données d'un participant}
		
			Cette fonctionnalité a été disposée dans l'interface administrateur à la demande du client. Ainsi, lorsqu'un participant veut voir ses données supprimées, il n'aura qu'à contacter la personne en charge de l'étude pour le faire. \\ 
			La suppression des données engendre la suppression de toutes les données fournies au cours des tests, mais pas de la suppression totale du participant dans la base. 
			
		\subsection{Lancement d'une étude}
			
			Une étude est un groupement de plusieurs sessions. Ainsi, lorsque l'étude est en cours, l'etudiant ne peut avoir accès à ses données, ce qui pourrait l'influencer dans ses tests futurs. \\
			Une fois l'étude lancée, on peut alors gérer les sessions qui vont la composer (cf fig.~\ref{V1-interface-admin-pannel-study}). On peut donc visualiser les différents tests déjà programmés ou en programmer un. \\ 
			Une session peut être programmée à l'avance. Afin de pouvoir en organiser une, il suffit d'entrer la date prévue (la session ne sera accessible qu'à cette date) ainsi que l'induction choisie : négative, positive ou neutre. \\ 
			L'utilisation d'un \verb+datePicker+ a complexifié le code par sa non-effectivité sur tous les navigateurs. Ainsi, la gestion du format de la date a du être pensée en conséquence. Les dates peuvent être renseignées sous la forme JJ/MM/AAAA ou AAAA-MM-JJ. En effet, le \verb+datePicker+ fournit une date conforme à la deuxième syntaxe. Or, lorsque celui-ci n'est pas disponible (sous Mozilla Firefox par exemple) il est plus intuitif pour un utilisateur d'entrer la date au format JJ/MM/AAAA. \\ 
			Une fois les deux champs renseignés et la date valide (il ne faut pas que la date soit antérieure à celle actuelle), uniquement dans ce cas, la session est créée et donc disponible pour les participants.
			
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.5\textwidth]{./img/V1/interface/admin-pannel-study}		
				\caption{Gestion d'une étude}
				\label{V1-interface-admin-pannel-study}
			\end{figure}
				
		\subsection{Visualisation des précédentes études}
			
			Cette fonctionnalité permet de visualiser toutes les études réalisées, ainsi que celle en cours, et permet, notamment, d'obtenir les résultats indépendamment pour chaque étude ou tous ensemble. La page destinée à cette fonctionnalité est la suivante (cf fig.~\ref{V1-interface-admin-pannel-studies}). 
			
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.5\textwidth]{./img/V1/interface/admin-pannel-studies}		
				\caption{Récapitulatif de toutes les études}
				\label{V1-interface-admin-pannel-studies}
			\end{figure}

	\section{Participation}

		Un nouvel utilisateur qui veut participer à l'étude doit renseigner quelques informations (cf fig.~\ref{V1-interface-new-participant}) utiles à l'étude et un identifiant qui permettra de lier les résultats de ses différents tests. Les informations requises sont minimales afin de préserver un certain anonymat : sexe, mois et année de naissance afin de déterminer l'âge et l'adresse mail. Cette dernière n'est utile que dans le but de récupérer son identifiant en cas d'oubli. 
		
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.5\textwidth]{./img/V1/interface/new-participant}		
			\caption{Inscription d'un nouveau participant}
			\label{V1-interface-new-participant}
		\end{figure}
		
		Une fois le compte créé, le participant peut accéder à sa fiche (cf fig.~\ref{V1-interface-participant}). Cette dernière est composée d'un récapitulatif de ses informations (adresse mail, sexe, mois et année de naissance), d'un accès aux données collectées (cf fig.~\ref{V1-interface-participant-data}) et d'un champ permettant de démarrer une session de test. Pour pouvoir en démarrer une, il suffit de saisir le code correspondant (transmis par l'administrateur) et s'il est valide la session commence. \\
		Pour être valide le code de session doit être prévu pour la date du test. De plus, un participant ne peut adhérer qu'une fois à chaque session. Ainsi, s'il à déjà correctement réalisé tout le test le code d'invitation ne fonctionnera plus pour ce participant. Néanmoins, si une erreur se produit au cours du test, il peut en relancer un avec le même code de session, la précédente sera enregistrée comme erronée et la nouvelle sera notifiée du nombre d'essais, pour la réalisation de ce test, dans le tableur des résultats.
		
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.5\textwidth]{./img/V1/interface/participant}		
			\caption{Fiche de participant}
			\label{V1-interface-participant}
		\end{figure}
		
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.8\textwidth]{./img/V1/interface/participant-data}		
			\caption{Données collectées pour le participant}
			\label{V1-interface-participant-data}
		\end{figure}
		
	\section{Déroulement d'un test}
	
		Nous allons maintenant aborder la partie centrale de l'interface : le test d'étude. 
		
		\subsection{Test de la PANAS}
		
			Une fois un code de session valide saisi, le participant accède à la première partie du test : le questionnaire de la PANAS (cf fig.~\ref{V1-interface-panas}). Ce questionnaire, connu dans le domaine de la psychologie, permet de déterminer l'état d'esprit d'un individu. Il nous a été fourni par le client. \\ 
			Ce formulaire doit être complétement rempli pour être validé. Ce dernier est composé de boutons radios pour les réponses, à la validation le PHP se charge de vérifier la validité du questionnaire (aucune réponse absente). 
		
			\begin{figure}[H]
				\centering
				\includegraphics[width=\textwidth]{./img/V1/interface/panas}		
				\caption{Questionnaire de la PANAS}
				\label{V1-interface-panas}
			\end{figure}
		
		\subsection{Consigne}
		
			Une fois le questionnaire de la PANAS rempli, une consigne pour le test des couleurs apparait (cf fig.~\ref{V1-interface-setpoint}). Celle-ci permet, en outre, de laisser le temps au participant de se préparer et de placer ses doigts sur les touches de réponse. Aussi, le test démarrera à la pression d'une des deux touches fléchées. 
			
			\begin{figure}[H]
				\centering
				\includegraphics[width=\textwidth]{./img/V1/interface/setpoint}		
				\caption{Consigne}
				\label{V1-interface-setpoint}
			\end{figure}
			
		\subsection{Test des couleurs}
		
			Le test des couleurs est donc une suite de choix successifs de la couleur préférée parmi les paires affichées. Celles-ci doivent permettre la comparaison de toutes les couleurs deux à deux. Toutes ces comparaisons s'afficheront sous différentes formes. De plus, les comparaisons apparaissent de manière aleatoire, ou plutôt semi-aléatoire, c'est-à-dire que la même paire de couleur ne doit pas apparaitre deux fois successives. En effet, l'ordre semi-aléatoire a été choisi de manière à ce qu'entre différents tests, le participant ne soit pas influencé par le fait de connaitre l'ordre d'apparition des paires. \\			
			
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{./img/V1/interface/color}		
				\caption{Choix de couleur}
				\label{V1-interface-color}
			\end{figure}
			
			Au démarrage du test, une matrice composée de toutes les couleurs et formes répertoriées dans la base de données est créée (cf fig.~\ref{V1-matrice}). Le choix des couleurs à afficher se fait à l'aide de la fonction suivante : \\
			
			\lstset{language=php,numbers=left, basicstyle=\scriptsize\ttfamily,keywordstyle=\color{blue}\bfseries,commentstyle=\color{vert}\textit,showstringspaces=false}
			\lstinputlisting[language=php]{./sources/V1-randomColor.php}
			
			\begin{figure}[H]
				\centering
				\begin{tabular}{|l|c|c|c|}
					\hline
					 & triangle & carré & rond \\
					\hline
					paire 1 & obj \verb+colorpair+ & obj \verb+colorpair+ & obj \verb+colorpair+ \\
					\hline
					paire 2 & obj \verb+colorpair+ & obj \verb+colorpair+ & obj \verb+colorpair+\\
					\hline
					paire 3 & obj \verb+colorpair+ & obj \verb+colorpair+ & obj \verb+colorpair+\\
					\hline
				\end{tabular}
				\caption{Matrice forme - paire de couleurs}
				\label{V1-matrice}
			\end{figure}

		\subsection{Remerciements}
			
			Un dernier écran s'affiche pour remercier le participant. Ensuite, le participant est redirigé vers sa fiche.
			
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.7\textwidth]{./img/V1/interface/remerciement}		
				\caption{Remerciements}
				\label{V1-interface-remerciement}
			\end{figure}	